<template>
  <v-app-bar
    app
    flat
  >
    <div class="boxed-container w-full">
      <div class="d-flex align-center mx-6">
        <!-- Left Content -->
        <v-app-bar-nav-icon
          class="d-block d-lg-none me-2"
          @click="isDrawerOpen = !isDrawerOpen"
        ></v-app-bar-nav-icon>
        <v-container class="mx-auto py-0">
          <v-row align="center">
            <v-img
              :src="require('@/assets/logo.png')"
              class="mr-5 logo"
              contain
              width="180"
              max-width="180"
              @click="gotoIndex"
            />

            <v-btn
              v-for="(link, index) in links"
              :key="index"
              v-bind="link"
              class="hidden-md-and-down"
              text
              large
            >
              {{ link.text }}
            </v-btn>
<!--            <v-tabs-->
<!--              center-->
<!--              class="ml-n9"-->
<!--              color="purple darken-1"-->
<!--            >-->
<!--              <v-tab-->
<!--                v-for="link in links"-->
<!--                :key="link"-->
<!--                @click="this.$router.push(link.href)"-->
<!--              >-->
<!--                {{ link.text }}-->
<!--              </v-tab>-->
<!--            </v-tabs>-->

            <!--              <v-text-field-->
            <!--                rounded-->
            <!--                dense-->
            <!--                outlined-->
            <!--                :prepend-inner-icon="icons.mdiMagnify"-->
            <!--                class="app-bar-search flex-grow-0"-->
            <!--                hide-details-->
            <!--              ></v-text-field>-->

            <v-spacer></v-spacer>

            <!-- Right Content -->
            <a
              href="https://gitee.com/Blessures/dreamhub_frontend"
              target="_blank"
              rel="nofollow"
            >
              <v-icon class="ms-6 me-4">
                {{ icons.mdiGithub }}
              </v-icon>
            </a>
            <theme-switcher></theme-switcher>
            <v-btn
              icon
              small
              class="ms-3"
            >
              <v-icon>
                {{ icons.mdiBellOutline }}
              </v-icon>
            </v-btn>
            <app-bar-user-menu></app-bar-user-menu>
          </v-row>
        </v-container>
      </div>
    </div>
  </v-app-bar>
</template>

<script>

// Utilities
import { mdiMagnify, mdiBellOutline, mdiGithub } from '@mdi/js'
// import VerticalNavMenu from "../layouts/components/vertical-nav-menu/VerticalNavMenu";
import ThemeSwitcher from "../layouts/components/ThemeSwitcher";
import AppBarUserMenu from "../layouts/components/AppBarUserMenu";
import { ref } from "@vue/composition-api/dist/vue-composition-api";

export default {
  name: 'AppBar',
  components: {
    // VerticalNavMenu,
    ThemeSwitcher,
    AppBarUserMenu,
  },
  methods: {
    gotoIndex(){
      this.$router.push({path: '/'});
    },
  },
  setup() {
    const isDrawerOpen = ref(null)

    return {
      isDrawerOpen,
      links: [
        // {
        //   text: "Dashboard",
        //   href: "dashboard"
        // },
        {
          text: "首页",
          href: "/"
        },
        {
          text: "排行榜",
          href: "/rank"
        },
        // {
        //   text: "Settings",
        //   href: "/settings"
        // },
        // {
        //   text: "Personal",
        //   href: "/personal"
        // },
        // {
        //   text: "Graph",
        //   href: "/graph"
        // },
        // {
        //   text: "Paperdetail",
        //   href: "/paperdetail"
        // },
      ],
      // Icons
      icons: {
        mdiMagnify,
        mdiBellOutline,
        mdiGithub,
      },
    }
  },
  // computed: {
  //   ...mapGetters(['links']),
  // },
  //
  // methods: {
  //   ...mapMutations(['toggleDrawer']),
  //   onClick(e, item) {
  //     e.stopPropagation()
  //
  //     if (item.to || !item.href) return
  //
  //     this.$vuetify.goTo(item.href.endsWith('!') ? 0 : item.href)
  //   },
  // },
}
</script>

<style lang="scss" scoped>
.v-app-bar ::v-deep {
  .v-toolbar__content {
    padding: 0;

    .app-bar-search {
      .v-input__slot {
        padding-left: 18px;
      }
    }
  }
}

.boxed-container {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.logo{
  cursor: pointer;
}
</style>
